<style scoped lang="scss">
	.top_rel {
		background: #FFFFFF;
		padding: 20rpx 40rpx;
	}

	.top_one {
		background: #F6F6F6;
		border: 1rpx solid rgba(97, 123, 185, 0.07);
		height: 70rpx;
		width: 90%;

	}

	.gary_a1 {
		color: #AAA1A1;
	}

	.bl_34 {
		color: #343434;
	}

	.blue_76 {
		color: #768196;
	}

	.btn1 {
		width: 20%;
		height: 72rpx;
		background: linear-gradient(215deg, #FF9331 0%, #FE7600 100%);
		text-align: center;
		line-height: 72rpx;
		position: absolute;
		z-index: 99;
		right: 0;
		top: 0;
	}

	.middle {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
	}
</style>

<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<!-- <public-head :title="title" onlyHead noshadow></public-head> -->
		<view class="top_rel">
			<view class="rel flex aic">
				<view class="top_one bra60 flex aic">
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/search.png" style="width:34rpx;height:36rpx" class="mg-l-30"></image>
					<input type="text" placeholder="输入客户的姓名" v-model="keyword" style="" class="bl_34 mg-l-20" placeholder-style="color:#AAA1A1" />
				</view>
				<view class="btn1 bra60 fff" @click="sousuo">搜索</view>
			</view>
		</view>
		<view class="flex jc-end" style="background: #F6F6F6;width: 100%;height: 64rpx;">
			<view class="flex aic" @click="tiaozhuan(1)">
				<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/mykehu/guanli.png" style="width:38rpx;height:38rpx" class="mg-r-10"></image>
				<view class="mg-r-20 bl_34 f26">管理分组</view>
			</view>
		</view>
		<view class="" style="background: #fff;">
			<view class="lrmg-30">
				<template v-if="type == 1">
					<view class="" :key="i" v-for="(it,i) in list">
						<view class="fsb middle" style="height: 80rpx;width: 100%;" @click="fenzu(i)">
							<view class="bl_34 mg-l-10">{{it.name}}</view>
							<view class="flex aic">
								<view class="blue_76 mg-r-20">{{it.user_num}}人</view>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/mykehu/right.png" style="width:17rpx;height:22rpx" class="mg-r-10">
								</image>
							</view>
						</view>
						<view class="fsb" :class="[index == item.length - 1 ? '' : 'middle']" style="height: 140rpx;width: 100%;" v-for="(item,index) in it.item" :key="index" v-show="it.flag == true" @click="caozuo(item,i)">
							<view class="bl_34 mg-l-10 flex aic">
								<image :src="item.avatar" style="width:90rpx;height:90rpx" class="bra50">
								</image>
								<view class="weight mg-l-10">{{item.nickname}}</view>
							</view>
							<view class="flex aic">
								<!-- <view class="blue_76 mg-r-10 ">添加时间：2020-12-10</view> -->
							</view>
						</view>
					</view>
				</template>
				<template v-if="type == 2">
					<view class="fsb" :class="[index == item.length - 1 ? '' : 'middle']" style="height: 140rpx;width: 100%;" v-for="(item,index) in lists" :key="index" @click="caozuo(item)">
						<view class="bl_34 mg-l-10 flex aic">
							<image :src="item.avatar" style="width:90rpx;height:90rpx" class="bra50"></image>
							<view class="weight mg-l-10">{{item.nickname}}</view>
						</view>
						<view class="flex aic">
							<!-- <view class="blue_76 mg-r-10 ">添加时间：2020-12-10</view> -->
						</view>
					</view>
				</template>
				<view class="fcc" v-if="type == 2 && lists == ''" style="background: #fff;height: 300rpx;width: 100%;">
					<view class="">无当前用户</view>
				</view>
			</view>
		</view>
		<view class="fcc mg-t-50" style="" v-if="type == 2">
			<view class="bra60 fff" style="width: 40%;height: 72rpx;background: linear-gradient(215deg, #FF9331 0%, #FE7600 100%);text-align: center;line-height: 72rpx;" @click="get">返回列表</view>
		</view>
		<u-popup v-model="show" mode="center" length="70%" border-radius="15">
			<view style="background: #fff;">
				<view class="fcc" style="width: 100%;height: 100rpx;border-bottom: 1px solid #EEEEEE;">
					<view class="weight">选择分组名称</view>
				</view>
				<radio-group @change="radioChange">
					<label class="" v-for="(item, index) in list" :key="item.name">
						<view class="fsb " style="border-bottom: 1px solid #EEEEEE;color: #3B3535;padding: 0 60rpx;height: 90rpx;">
							<view>{{item.name}}</view>
							<radio :value="item.name" :checked="index === current" color="#F78361" />
						</view>
					</label>
				</radio-group>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that
	var audio
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '',
				list: [],
				lists:[],
				show: false,
				current: 0,
				keyword:'',
				type:1,//1为列表，2为搜索用户
				uid:''
			}
		},
		onLoad() {
			that = this
			audio = uni.createInnerAudioContext()
			audio.src = 'https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng/ding.mp3'
			// 判断是否有缓存
			let userInfo = uni.getStorageSync("chongdoc_login")
			if (userInfo == '' || userInfo == undefined) {
			} else {
				console.log('已登录')
				// 我的客户开启监听
				var onMessageReceiveds
				onMessageReceiveds = function(event) {
					if(that.$store.state.doc_type == 2){
						console.log('医生端我的客户监听' ,event);
						uni.showTabBarRedDot({
							index:0
						})
						audio.play()
					}
				};
				that.$tim.on(that.$TIM.EVENT.MESSAGE_RECEIVED, onMessageReceiveds);
			}
		},
		onShow() {
			that.$store.state.doc_type = 2
			let type = that.$store.state.fz_type
			// if(type == 0){
				that.get()
			// }
		},
		methods: {
			sousuo(){
				if(that.keyword == ''){
					uni.showToast({
						title: '请输入客户的姓名',
						icon: 'none',
						duration: 1500
					});
					return
				}
				uni.showLoading({
					mask: true
				});
				let postData = {
					keyword:that.keyword
				}
				that.$postAjax1('DoctorGroup_search',postData,function(data){
					that.type = 2
					that.lists = data.data.data
					uni.hideLoading()
				})
			},
			radioChange: function(evt) {
				for (let i = 0; i < that.list.length; i++) {
					if (that.list[i].name === evt.target.value) {
						that.current = i;
						let postData = {
							user_id:that.uid,
							group_id:that.list[that.current].id
						}
						that.$postAjax1('DoctorGroup_user_move_group',postData,function(data){
							that.show = false
							that.get()
						})
						break;
					}
				}
			},
			get() {
				that.$postAjax1('DoctorGroup_group_list_num','',function(data){
					let list = data.data.data
					list.map((obj) => {
						obj.flag = false
						obj.item = null
						return obj
					})
					that.list = list
					that.type = 1
					that.$store.state.fz_type = 1
					console.log("that.list: " + JSON.stringify(that.list));
				})
			},
			fenzu(i) {
				if (!!that.list[i].item) {
					that.list[i].flag = !that.list[i].flag
				} else {
					let postData = {
						group_id:that.list[i].id
					}
					that.$postAjax1('DoctorGroup_group_user_list',postData,function(data){
						console.log(data.data.data)
						that.list[i].item = data.data.data
						that.list[i].flag = !that.list[i].flag
					})
				}
			},
			tiaozhuan(e) {
				if (e == 1) {
					uni.navigateTo({
						url: '../../pagesB/mykehu/fenzu'
					})
				}
			},
			caozuo(item,n) {
				that.uid = item.uid
				uni.showActionSheet({
					itemList: ['查询问诊记录', '修改分组'],
					itemColor: '#2F78F3',
					success: function(res) {
						// console.log('选中了第' + ( + 1) + '个按钮');
						if (res.tapIndex == 0) {
							uni.navigateTo({
								url:'../../pagesB/mykehu/jilu?item=' + JSON.stringify(item)
							})
						} else {
							if(that.type == 1){
								that.current = n
							}else if(that.type == 2){
								let id = item.group_id == null ? 0 : item.group_id
								for (var i = 0; i < that.list.length; i++) {
									if(that.list[i].item.id == id){
										that.current = i
										break
									}
								}
							}
							that.show = true
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>
